<template>
  <el-row>
  <p style="font-size: xx-large">我的项目</p>
    <el-row :gutter="14" >
      <el-col :span="23" :offset="1">
      <el-card>
        <el-table
        :data="tableData"
        style="width: 100%"
        max-height="370">
        <el-table-column
          fixed
          prop="pName"
          label="项目名称"
          width="150">
        </el-table-column>

        <el-table-column
          prop="pProjectStatus"
          label="项目状态"
          width="120"
          :filters="[{text:'已完成',value:'已完成'},{text:'未完成',value:'未完成'}]"
          :filter-method="filterByPro"
        >
        </el-table-column>

        <el-table-column
          prop="pId"
          label="项目编号"
          width="120">
        </el-table-column>

        <el-table-column
          prop="pType"
          label="项目类型"
          width="120">
        </el-table-column>
        <el-table-column
          prop="pCreateDate"
          label="项目创建日期"
          width="120">
        </el-table-column>
    <!--      一个完整的表格列如下所示-->
        <el-table-column
          prop="pProgress"
          label="项目进度"
          width="100">
    <!--      这里是再表格内部做花样-->
          <template slot-scope="scope">
            <span>{{scope.row.pProgress}}</span>

          </template>
        </el-table-column>
        <el-table-column
          prop="pFileUrl"
          label="项目文件"
          width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.pProjectStatus == '已完成'">
              <el-button @click="getFile(scope.row.pId)">点击下载</el-button>
<!--              <el-link :href="scope.row.pFileUrl" target="_blank">点击下载</el-link>-->
            </div>
            <div v-else>
              <el-link :href="scope.row.pFileUrl" target="_blank" disabled>未完成，无法下载</el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="pModelManagerId"
          label="模型主管"
          width="120">
          <template slot-scope="scope">
            <el-tooltip :content="'tel:'+scope.row.pModelManagerId.tel" placement="top">
              <el-button type="text">
               {{scope.row.pModelManagerId.name}}
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="pRenderManagerId"
          label="渲染主管"
          width="120">
          <template slot-scope="scope">
            <el-tooltip :content="'tel:'+scope.row.pRenderManagerId.tel" placement="top">
              <el-button type="text">
                {{scope.row.pRenderManagerId.name}}
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="pAfterManagerId"
          label="后期主管"
          width="120">
          <template slot-scope="scope">
            <el-tooltip :content="'tel:'+scope.row.pAfterManagerId.tel" placement="top">
              <el-button type="text">
                {{scope.row.pAfterManagerId.name}}
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
    <!--    <el-table-column-->
    <!--      fixed="right"-->
    <!--      label="操作"-->
    <!--      width="120">-->
    <!--      <template slot-scope="scope">-->
    <!--        <el-button-->
    <!--          @click.native.prevent="deleteRow(scope.$index, tableData)"-->
    <!--          type="text"-->
    <!--          size="small">-->
    <!--          移除-->
    <!--        </el-button>-->
    <!--      </template>-->
    <!--    </el-table-column>-->
      </el-table>
      </el-card>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
  import Global from '../../utils/global'


  var period2progressMap = ['创建成功','建模结束','渲染结束','后期结束','验收结束']
  var statusMap = ['已完成','暂停','终止','进行中']
//阶段状态到阶段名称的映射表         //写错了
  export default {
    name: 'MyProject',
    data(){
      return {
        input4search:'',
        glo:new Global,
        tableData: [
          {pName:'重庆交通大学热水器改造计划',
          pId:'10085',
          pProjectStatus:'已完成',
          pType:'教育项目',
          pCreateDate:new Date(2020,5,5).toDateString(),
          pProgress:'渲染中',
          pFileUrl:'https://github.com/ShowiBin/sophomore02_RMMS/archive/master.zip',
          pModelManagerId:
            {
              name:'李二狗',
              tel:'15588994783'
            },
          pRenderManagerId:
            {
              name:'李二狗',
              tel:'15588994783'
            },
          pAfterManagerId:
            {
              name:'李二狗',
              tel:'15588994783'
            }
          }
        ]
      }
    },
    methods: {
      filterByPro(value, row, column){
        const property = column['property'];
        return row[property] === value;
      },
      inserTable (line) {
          this.tableData.push(
            {
              pName: line.pName,
              pId:line.pId,
              pProjectStatus:statusMap[line.pProjectStatus],
              pType:line.pType,
              pCreateDate:line.pCreateDate,
              pProgress:period2progressMap[line.pPeriodStatus],
              pFileUrl:line.pFileUrl,
              pModelManagerId:
                {
                  name:line.pModelManagerId,
                  tel:'14730891105'
                },
              pRenderManagerId:
                {
                  name:line.pRenderManagerId,
                  tel:'14730891105'
                },
              pAfterManagerId:
                {
                  name:line.pAfterManagerId,
                  tel:'14730891105'
                }
            }
          )
        },
      getFile(pid){
         var timestamp = (new Date()).valueOf();
         var token = md5("epms" + timestamp);
         window.open("http://47.92.227.185:8080/download/projectFile?token="+token+"&timestamp="+timestamp+"&pId="+pid);
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      initProjectPage (res) {
        if (1){//可能还需要判断是否获取成功

        }
        console.log(res)

        for (var line in res.data.commitLogList){
          this.inserTable(res.data.commitLogList[line])
        }
        console.log(this.tableData)

      }

    },
    mounted () {
      let data = {
        sId:JSON.parse(sessionStorage.getItem('StaffInfo')).sId
      }
      this.glo.sendDate(this.glo.server+'manager/getOwnProject',data,this.initProjectPage)
    },

  }
</script>

<style scoped>

</style>
